<!DOCTYPE html>
<html>
 <head>
  <style>
  
   .div1 {
    position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
    width: 1000px;
    height: 500px;
    background-color: antiquewhite;
   }
    .div2 {
    position: relative;
    width: 50px;
    height: 50px;
    background-color: aqua;
  
    animation-duration: 10s;
    animation-play-state: running;
    animation-iteration-count: infinite;
    animation-name: Animation;
   }
   @keyframes Animation {
        from {
          top:0px;
          left: 0px;
        }
        25% {
          top:450px;
          left: 200px;
        }
        50% {
          top:0px;
          left: 450px;
        }
        75%{
           top:450px;
           left: 700px;
        }
        to {
          
          left: 950px;
          top: 0px;
        }
    }
 </style>
 </head>
 <body>
   <div class="div1">
      <div class="div2">

      </div>
    </div>
  </body>
</html>